<div class="container">
    <div class="page-c inner-container">
        <zepride-department-and-role [departmentList]="departmentNodes"
            (departmentSelectChanged)="departmentChanged($event)" (modeChanged)="modeChanged($event)"
            (roleValueChanged)="roleValueChanged($event)" (roleSelectChanged)="roleSelectChanged($event)">
        </zepride-department-and-role>

        <div class="center-p">
            <zepride-topbar *ngIf="mode == 'department'" [departmentNode]="departmentInfo"
                [employeeNodes]="employeeNodes">
            </zepride-topbar>
            <div class="role-top-panel" *ngIf="mode == 'role'">
                角色所属人员：
                <div class="item" *ngFor="let item of curAccountRoles">
                    {{item.user.name}}
                    <a nz-button nzType="link" nzDanger (click)="removeUserFromRole(item)">
                        <i class="iconfont icon-close-line"></i>
                    </a>
                </div>
                <div class="spacer"></div>
                <div class="userRole-btn">
                    <span>匹配角色</span>
                    <a nz-button nzType="link" (click)="editRoleUser()">
                        <i class="iconfont icon-user-line"></i>
                    </a>
                </div>
            </div>
            <div class="content">
                <div class="title-p">
                    <div class="margin-r">权限配置</div>
                    <!-- <div *ngIf="mode == 'department'">
                        <button nz-button [nzType]="configMode=='independent'?'primary':'default'" class="margin-r"
                            (click)="configModeChanged('independent')">独立配置</button>
                        <button nz-button [nzType]="configMode=='role'?'primary':'default'" *ngIf="canConfigRole"
                            (click)="configModeChanged('role')">匹配角色</button>
                    </div> -->
                    <div class="spacer"></div>
                    <div>
                        <button nz-button nzType="default" class="margin-r" (click)="permitPerview()">所属权限预览<i nz-icon
                                nzType="eye" nzTheme="outline"></i></button>
                        <button nz-button nzType="primary" (click)="savePermit()">保存</button>
                    </div>
                </div>
                <div class="title-p" *ngIf="configMode=='role'">
                    <div class="check-item" *ngFor="let item of roles">
                        <label nz-checkbox [(ngModel)]="item.checked">{{item.name}}</label>
                    </div>
                </div>

                <div class="config-p">
                    <div class="nav-bar" *ngIf="curMenu">
                        当前所在菜单：{{curMenu.name}} <span *ngIf="curSMenu"> > {{curSMenu.name}}</span>
                    </div>

                    <zepride-menu-panel [permits]="permitList" (pageDataChanged)="onPageDataChanged($event)">
                    </zepride-menu-panel>

                    <div class="config-body" #container>
                        <span id="permitNoPageMsg">请选择左侧菜单</span>
                        <div class="minimap-container" #minimapContainerRef></div>
                    </div>
                </div>

                <div class="button-panel">
                    <div class="tip-item">
                        <div class="circular"></div>
                        未选择
                    </div>
                    <div class="tip-item">
                        <div class="circular" style="background-color: #45C650;"></div>
                        全部选中
                    </div>
                    <div class="tip-item">
                        <div class="circular" style="background-color: #FF9500;"></div>
                        部分选中
                    </div>

                    <div class="spacer"></div>
                    <div class="">
                        <div class="txt-btn" (click)="checkAllocatedPermits()">
                            <span>检索机构未分配权限</span>
                            <div class="icon" nz-tooltip nzTooltipTitle="检索机构（单位）权限是否被各部门分配完毕">
                                <i class="iconfont icon-search-2-line"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>